<template>
  <div class="login-container">
    <!-- 动态背景 -->
    <div class="background">
      <div class="wave wave1"></div>
      <div class="wave wave2"></div>
      <div class="wave wave3"></div>
    </div>
    <!-- 登录表单 -->
    <div class="login-form">
      <h1 class="title">水利物联网登录</h1>
      <el-form :model="form" :rules="rules" ref="formRef" label-width="80px" >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(formRef)">登录</el-button>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
          <el-checkbox v-model="form.rememberMe">记住密码</el-checkbox>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref,reactive } from 'vue';
import type {FormInstance, FormRules} from 'element-plus';
import {useRouter} from "vue-router";
import {useUserStore} from "@/store/user.ts";

// 引入store
const userStore = useUserStore();

// 路由
const router = useRouter();

const formRef = ref<FormInstance>();

const form = reactive({
  username: '',
  password: '',
  rememberMe: ''
});

// submitForm(formRef)将表单实例提交，并校验表单
// async宏任务
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid && form.username === 'admin' && form.password === '123456') {
      console.log('登录成功')
      userStore.login('admin','123456');
      // 编程式路由导航
      router.push({path: '/'})
    } else {
      console.log('账号或密码错误')
    }
  })
}


const rules = reactive<FormRules>({
  // 校验指向prop="username" 表示表单中的 prop 属性，用于标识表单字段的名称。
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
  ]
})


</script>

<style scoped>
.login-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%230099ff" fill-opacity="0.3" d="M0,192L48,176C96,160,192,128,288,117.3C384,107,480,117,576,138.7C672,160,768,192,864,197.3C960,203,1056,181,1152,165.3C1248,149,1344,139,1392,133.3L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
  background-size: 1440px 100px;
  animation: wave 15s linear infinite;
}

.wave1 {
  opacity: 0.3;
  animation-delay: 0s;
  bottom: 0;
}

.wave2 {
  opacity: 0.5;
  animation-delay: -5s;
  bottom: 10px;
}

.wave3 {
  opacity: 0.7;
  animation-delay: -10s;
  bottom: 20px;
}

@keyframes wave {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 1440px;
  }
}

.login-form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.9);
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  width: 350px;
}

.title {
  text-align: center;
  margin-bottom: 30px;
  color: #0099ff;
  font-size: 28px;
}

</style>